<template>
  <div class="box">
    <el-card class="card-css">
      <div class="zhpj">
        <span class="zhpj-span">报表打印</span>
      </div>

      <div class="table-css">
        <div class="btn-css">
          <el-button type="success" @click="handleActIdx(0)">办公区</el-button>
          <el-button type="success" @click="handleActIdx(1)">商业区</el-button>
          <el-button type="success" @click="dialogVisible = !dialogVisible"
            >自定义</el-button
          >
        </div>

        <div class="select02">
          <el-select placeholder="一小时">
            <el-option label="一分钟" value="shanghai" />
            <el-option label="五分钟" value="beijing" />
            <el-option label="一小时" value="beijing" />
            <el-option label="一天" value="beijing" />
            <el-option label="一月" value="beijing" />
          </el-select>
        </div>

        <div class="block">
          <el-date-picker
            :disabled-date="disabledDate"
            type="daterange"
            v-model="dataValue"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>

        <div class="btn-01">
          <el-button type="primary" @click="exportExcel">下 载</el-button>
        </div>
        <!-- <div class="btn-02">
					<el-button type="primary">打 印</el-button>
				</div> -->
      </div>

      <div class="table">
        <!-- 办公区 -->
        <el-table
          v-if="btnIdx == 0"
          :row-key="getRowKeys"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#B4C7E7',
            color: '#333333',
          }"
          :cell-style="{
            'text-align': 'center',
            background: '#f5f8fb',
          }"
        >
          <el-table-column
            v-if="tableCol.time"
            prop="createTime"
            label="时间"
            width="150"
          />
          <el-table-column
            v-for="i in tableCol.data"
            :key="i.id"
            :label="i.label"
          >
            <el-table-column
              v-for="opt in i.children"
              :key="opt.id"
              :prop="opt.prop"
              :label="opt.label"
            >
              <el-table-column
                v-for="opt1 in opt.children"
                :key="opt1.id"
                :prop="opt1.prop"
                :label="opt1.label"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- 商业区 -->
        <el-table
          v-if="btnIdx == 1"
          :row-key="getRowKeys"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#B4C7E7',
            color: '#333333',
          }"
          :cell-style="{
            'text-align': 'center',
            background: '#f5f8fb',
          }"
        >
          <el-table-column
            v-if="tableCol.time"
            prop="createTime"
            label="时间"
            width="150"
          />
          <el-table-column
            v-for="i in tableCol.data2"
            :key="i.id"
            :label="i.label"
          >
            <el-table-column
              v-for="opt in i.children"
              :key="opt.id"
              :prop="opt.prop"
              :label="opt.label"
            >
              <el-table-column
                v-for="opt1 in opt.children"
                :key="opt1.id"
                :prop="opt1.prop"
                :label="opt1.label"
              >
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- <div class="pagination">
					<el-pagination v-model:currentPage="currentPage3" v-model:page-size="pageSize3" :small="small"
						:disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div> -->
      </div>
    </el-card>

    <!-- 自定义弹框 -->
    <el-dialog
      v-model="dialogVisible"
      append-to-body
      title="自定义"
      ref="dialog"
      @opened="open"
      width="504px"
    >
      <div class="checkbox-div">
        <div>
          <el-checkbox v-model="ckAll" label="全选" size="large" />
        </div>

        <div>
          <el-checkbox v-model="time1" label="时间" size="large" />
        </div>
        <div>办公区</div>
        <div>
          <el-tree
            :data="testdata"
            ref="tree"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          >
          </el-tree>
        </div>
        <div>商业区</div>
        <div>
          <el-tree
            :data="testdata11"
            ref="tree2"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          >
          </el-tree>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" class="quxiao-btn"
            >取消</el-button
          >
          <el-button type="primary" @click="saveProp" class="sava-btn"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import { ShushiList } from "@/api/model/end";
import FileSaver from "file-saver";
import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
let dialogVisible = ref(false);
let tree = ref(null);
let tree2 = ref(null);
let dialog = ref(null);
const btnIdx = ref(0);
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
let dataValue = ref("");
const testdata = ref([
  {
    id: 1,
    label: "T1",
  },
  {
    id: 2,
    label: "T2",
  },
]);
const testdata11 = ref([
  {
    id: 11,
    label: "LG2 奈雪の茶门口送风口",
  },
  {
    id: 12,
    label: "L1F Tiffany&CO（东）门口送风口",
  },
  {
    id: 3,
    label: "LG2 Adidas门口送风口",
  },
  {
    id: 4,
    label: "L2F Luneurs门口送风口温度",
  },
  {
    id: 5,
    label: "L2F MannerCoffe门口送风口",
  },
  {
    id: 6,
    label: "L2F 派悦坊门口送风口",
  },
  {
    id: 7,
    label: "LG1 Kate spade门口",
  },
  {
    id: 8,
    label: "L1F 花厨门口送风口",
  },
  {
    id: 9,
    label: "L1 Rolex门口送风口",
  },
  {
    id: 10,
    label: "L1F Tiffany&CO门口",
  },
]);
const testdata1 = ref([
  {
    id: 1,
    label: "T1",
    children: [
      {
        id: 5,
        label: "5F空调箱送风",
        prop: "temperatureIndoor",
        children: [
          {
            id: 5.1,
            label: "温度",
            prop: "temperatureIndoor1",
          },
          {
            id: 5.2,
            label: "湿度",
            prop: "temperatureIndoor2",
          },
        ],
      },
      {
        id: 6,
        label: "6F空调箱送风",
        prop: "temperatureOutdoor",
        children: [
          {
            id: 6.1,
            label: "温度",
            prop: "temperatureOutdoor1",
          },
          {
            id: 6.2,
            label: "湿度",
            prop: "temperatureOutdoor2",
          },
        ],
      },
      {
        id: 7,
        label: "7F空调箱送风",
        prop: "temperatureStationOne",
        children: [
          {
            id: 7.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 7.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
      {
        id: 8,
        label: "8F空调箱送风",
        prop: "temperatureStationTwo",
        children: [
          {
            id: 8.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 8.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
      {
        id: 9,
        label: "9F空调箱送风",
        prop: "temperatureStationThree",
        children: [
          {
            id: 9.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 9.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "T2",
    children: [
      {
        id: 5,
        label: "5F空调机房外送风",
        prop: "temperatureIndoor",
        children: [
          {
            id: 5.1,
            label: "温度",
            prop: "temperatureIndoor1",
          },
          {
            id: 5.2,
            label: "湿度",
            prop: "temperatureIndoor2",
          },
        ],
      },
      {
        id: 6,
        label: "6F空调箱送风",
        prop: "temperatureOutdoor",
        children: [
          {
            id: 6.1,
            label: "温度",
            prop: "temperatureOutdoor1",
          },
          {
            id: 6.2,
            label: "湿度",
            prop: "temperatureOutdoor2",
          },
        ],
      },
      {
        id: 7,
        label: "7F空调箱送风",
        prop: "temperatureStationOne",
        children: [
          {
            id: 7.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 7.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
      {
        id: 8,
        label: "8F空调箱送风",
        prop: "temperatureStationTwo",
        children: [
          {
            id: 8.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 8.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
      {
        id: 9,
        label: "9F空调箱送风",
        prop: "temperatureStationThree",
        children: [
          {
            id: 9.1,
            label: "温度",
            prop: "temperatureStationOne1",
          },
          {
            id: 9.2,
            label: "湿度",
            prop: "temperatureStationOne2",
          },
        ],
      },
    ],
  },
  // {
  //   id: 2,
  //   label: "T1",
  //   children: [
  //     {
  //       id: 10,
  //       label: "5F空调箱送风",
  //       prop: "temperatureIndoor",
  //     },
  //     {
  //       id: 11,
  //       label: "6F空调箱送风",
  //       prop: "temperatureOutdoor",
  //     },
  //     {
  //       id: 12,
  //       label: "7F空调箱送风",
  //       prop: "temperatureStationOne",
  //     },
  //     {
  //       id: 13,
  //       label: "8F空调箱送风",
  //       prop: "temperatureStationTwo",
  //     },
  //     {
  //       id: 14,
  //       label: "9F空调箱送风",
  //       prop: "temperatureStationThree",
  //     },
  //   ],
  // },
  // {
  //   id: 2,
  //   label: "湿度%",
  //   children: [
  //     {
  //       id: 9,
  //       label: "室内",
  //       prop: "humidityIndoor",
  //     },
  //     {
  //       id: 10,
  //       label: "室外",
  //       prop: "humidityOutdoor",
  //     },
  //     {
  //       id: 11,
  //       label: "测点1",
  //       prop: "humidityStationOne",
  //     },
  //     {
  //       id: 12,
  //       label: "测点2",
  //       prop: "humidityStationTwo",
  //     },
  //   ],
  // },
  // {
  //   id: 3,
  //   label: "CO₂ppm",
  //   children: [
  //     {
  //       id: 13,
  //       label: "室内",
  //       prop: "coPpmIndoor",
  //     },
  //     {
  //       id: 14,
  //       label: "室外",
  //       prop: "coPpmOutdoor",
  //     },
  //     {
  //       id: 15,
  //       label: "测点1",
  //       prop: "coPpmStationOne",
  //     },
  //     {
  //       id: 16,
  //       label: "测点2",
  //       prop: "coPpmStationTwo",
  //     },
  //   ],
  // },
  // {
  //   id: 4,
  //   label: "PM2.5µg/m³",
  //   children: [
  //     {
  //       id: 17,
  //       label: "室内",
  //       prop: "pmIndoor",
  //     },
  //     {
  //       id: 18,
  //       label: "室外",
  //       prop: "pmOutdoor",
  //     },
  //     {
  //       id: 19,
  //       label: "测点1",
  //       prop: "pmStationOne",
  //     },
  //     {
  //       id: 20,
  //       label: "测点2",
  //       prop: "pmStationTwo",
  //     },
  //   ],
  // },
]);

const testdata2 = ref([
  {
    id: 11,
    label: "LG2 奈雪の茶门口送风口",
    prop: "temperatureIndoor",
    children: [
      {
        id: 5.1,
        label: "温度",
        prop: "temperatureIndoor1",
      },
      {
        id: 5.2,
        label: "湿度",
        prop: "temperatureIndoor2",
      },
    ],
  },
  {
    id: 12,
    label: "L1F Tiffany&CO（东）门口送风口",
    prop: "temperatureOutdoor",
    children: [
      {
        id: 6.1,
        label: "温度",
        prop: "temperatureOutdoor1",
      },
      {
        id: 6.2,
        label: "湿度",
        prop: "temperatureOutdoor2",
      },
    ],
  },
  {
    id: 3,
    label: "LG2 Adidas门口送风口",
    prop: "temperatureStationOne",
    children: [
      {
        id: 7.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 7.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
  {
    id: 4,
    label: "L2F Luneurs门口送风口温度",
    prop: "temperatureStationTwo",
    children: [
      {
        id: 8.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 8.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
  {
    id: 5,
    label: "L2F MannerCoffe门口送风口",
    prop: "temperatureStationThree",
    children: [
      {
        id: 9.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 9.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
  {
    id: 6,
    label: "L2F 派悦坊门口送风口",
    prop: "temperatureIndoor",
    children: [
      {
        id: 5.1,
        label: "温度",
        prop: "temperatureIndoor1",
      },
      {
        id: 5.2,
        label: "湿度",
        prop: "temperatureIndoor2",
      },
    ],
  },
  {
    id: 7,
    label: "LG1 Kate spade门口",
    prop: "temperatureOutdoor",
    children: [
      {
        id: 6.1,
        label: "温度",
        prop: "temperatureOutdoor1",
      },
      {
        id: 6.2,
        label: "湿度",
        prop: "temperatureOutdoor2",
      },
    ],
  },
  {
    id: 8,
    label: "L1F 花厨门口送风口",
    prop: "temperatureStationOne",
    children: [
      {
        id: 7.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 7.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
  {
    id: 9,
    label: "L1 Rolex门口送风口",
    prop: "temperatureStationTwo",
    children: [
      {
        id: 8.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 8.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
  {
    id: 10,
    label: "L1F Tiffany&CO门口",
    prop: "temperatureStationThree",
    children: [
      {
        id: 9.1,
        label: "温度",
        prop: "temperatureStationOne1",
      },
      {
        id: 9.2,
        label: "湿度",
        prop: "temperatureStationOne2",
      },
    ],
  },
]);
const handleActIdx = (val) => {
  btnIdx.value = val;
};
// 给table 一个key值 防止复用
const getRowKeys = (row) => {
  return row.id;
};
const defaultProps = {
  label: "label",
  children: "children",
};

let time1 = ref(true);

let zh1 = ref(true);
let tableCol = reactive({
  data: JSON.parse(sessionStorage.getItem("tb")) || toRaw(testdata1),
  data2: JSON.parse(sessionStorage.getItem("tb2")) || toRaw(testdata2),
  time: sessionStorage.getItem("time")
    ? JSON.parse(sessionStorage.getItem("time"))
    : true,
  zh: sessionStorage.getItem("zh")
    ? JSON.parse(sessionStorage.getItem("zh"))
    : true,
});

const ckAll = computed({
  get() {
    return (
      time1.value && zh1.value && tree.value.getCheckedNodes().length === 4
    );
  },
  set(val) {
    if (val) {
      console.log(tree.value.getCheckedNodes(), "sss");
      tree.value.setCheckedNodes(testdata.value);
      tree2.value.setCheckedNodes(testdata11.value);
      time1.value = val;
      zh1.value = val;
    } else {
      tree.value.setCheckedKeys([], false);
      tree2.value.setCheckedKeys([], false);
      time1.value = val;
      zh1.value = val;
    }
  },
});

const tableData = ref([]);

const setData = () => {
  if (sessionStorage.getItem("tb")) {
    tableCol.data = JSON.parse(sessionStorage.getItem("tb"));
  }
  if (sessionStorage.getItem("tb2")) {
    tableCol.data2 = JSON.parse(sessionStorage.getItem("tb2"));
  }
  if (sessionStorage.getItem("time")) {
    tableCol.time = JSON.parse(sessionStorage.getItem("time"));
  }
  if (sessionStorage.getItem("zh")) {
    tableCol.zh = JSON.parse(sessionStorage.getItem("zh"));
  }
};
const open = () => {
  time1.value = tableCol.time;
  zh1.value = tableCol.zh;
  tree.value.setCheckedNodes(tableCol.data);
  tree2.value.setCheckedNodes(tableCol.data2);
  console.log(tree.value.getCheckedNodes(true, false));
  console.log(tree2.value.getCheckedNodes(true, false));
};
const saveProp = () => {
  // 处理选择的节点数据
  // testdata.value = testdata1.value;
  let col = tree.value
    // 获取包括半选节点
    .getCheckedNodes(false, false)
    .map((item) => {
      return testdata1.value.find((i) => i.id === item.id);
    });
  let col2 = tree2.value
    // 获取包括半选节点
    .getCheckedNodes(false, false)
    .map((item) => {
      return testdata2.value.find((i) => i.id === item.id);
    });
  sessionStorage.setItem("tb", JSON.stringify(col));
  sessionStorage.setItem("tb2", JSON.stringify(col2));
  sessionStorage.setItem("time", JSON.stringify(time1.value));
  sessionStorage.setItem("zh", JSON.stringify(zh1.value));

  setData();

  dialogVisible.value = false;
};
onMounted(() => {
  dialog.value.rendered = true;
  getShushiList();
});
function exportExcel() {
  //需给表格定义一个id或者类名
  console.log("1111111111", XLSX);
  let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
  console.log("222");
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      "111.xlsx"
    ); //***是自己导出文件时的命名，随意
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
const getShushiList = async () => {
  // 打印报表-舒适性列表
  let { data: res } = await ShushiList({ page: 1 });
  console.log("打印报表-舒适性列表", res);
  if (res.code == 200) {
    tableData.value = res.data.list;
  }
};
</script>

<style lang="less" scoped>
.box {
  display: flex;

  .card-css {
    flex: 1;
    width: 1760px;
    height: 817px;
    position: relative;

    .zhpj {
      position: absolute;
      border-bottom: 1px solid #d9deec;
      margin-right: 120px;
      margin-left: -20px;
      padding-left: 20px;
      padding-bottom: 20px;
      width: 100%;

      .zhpj-span {
        font-family: SourceHanSansSC-medium;
        font-weight: 700;
        color: #4d62a5;
        font-size: 20px;
      }
    }

    .table-css {
      display: flex;
      margin-top: 66px;
      justify-content: flex-end;

      .select01 {
        width: 100px;
      }

      .select02 {
        width: 100px;
        margin-right: 20px;
        margin-left: 20px;
      }

      .btn-01 {
        margin-left: 20px;
        margin-right: 20px;
      }

      .el-button {
        background-color: #8faadc;
        border-color: #8faadc;
      }

      .btn-css {
        flex-grow: 1;
      }
    }
  }

  .table {
    margin-top: 20px;

    .el-checkbox {
      top: 3px;
      margin-left: 5px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}

.sava-btn {
  border-color: #8faadc;
  background-color: #8faadc;
}

.quxiao-btn {
  border-color: #cccccc;
  background-color: #cccccc;
  color: #fff;
}

:deep(.el-dialog__title) {
  color: #4d62a5;
}

.checkbox-div > div {
  margin-bottom: 2px;
}

:deep(.el-tree-node__content) {
  margin-bottom: 8px;
}

:deep(.el-dialog__body) {
  border-top: 1px solid #e7eaf3;
  border-bottom: 1px solid #e7eaf3;
}
</style>
